<template>
    <div class="used-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="交易中心及办事指南" name="1">
                <trading-and-work :usedIdArr.sync="usedIdArr"></trading-and-work>
            </el-tab-pane>
            <el-tab-pane label="交易平台" name="2">
                <platform :usedIdArr.sync="usedIdArr"></platform>
            </el-tab-pane>
            <el-tab-pane label="工具下载" name="3">
                <download-tool :usedIdArr.sync="usedIdArr"></download-tool>
            </el-tab-pane>

            
            <el-tab-pane label="常用网站" name="4">
                <other :usedIdArr.sync="usedIdArr"></other>
            </el-tab-pane>
            <!-- <el-tab-pane label="平台工具" name="5">
                <platform-tool :usedIdArr.sync="usedIdArr"></platform-tool>
            </el-tab-pane> -->
        </el-tabs>

        <div class="text-info">
            <el-link type="info" :underline="false">确认将这些（最多10项）添加到我的常用模块里，方便您的访问！</el-link>
        </div>

        <div class="bottom">
            <el-link v-show="usedIdArr.length <= 0 && !!showInfo" type="danger" :underline="false">还未选择需添加到我的常用模块的链接！</el-link>

            <!-- 占位的div 勿删 -->
            <div></div>

            <div class="btns">
                <el-button @click="cancel()" size="medium">取消</el-button>
                <el-button class="btn-submit" type="primary" size="medium" @click="submit()"
                    >提交</el-button
                >
            </div>
        </div>
    </div>

</template>

<script>
import tradingAndWork from './trading-and-work.vue'
import citys from '../../trading-platform/json/city.json'
import Platform from './platform.vue'
import other from './other.vue'
import downloadTool from './download-tool.vue';
import PlatformTool from './platform-tool.vue';

export default {
    head: {
    },
    props:{
        guidArr:{
            type: [Object, Array],
            default: () => ({})
        },
        afterSubmit: {
            type: [Function, Boolean],
            default: false
        },
    },
    components: { 
        tradingAndWork,
        Platform,
        other,
        downloadTool,
        PlatformTool,
    },
    data: () => ({
        activeName:'1',
        dataAll:{},
        usedIdArr:[],
        tradingIdArr:[],
        jyptIdArr:[],
        toolIdArr:[],
        otherIdArr:[],
        ptIdArr:[],

        showInfo:false,
    }),
    watch: {
        guidArr: {
            immediate: true,
            deep: true,
            handler(n, o) {
                this.usedIdArr = clone(n)
            }
        },
        usedIdArr: {
            deep: true,
            handler(n, o) {
                if(!!n && n.length > 0){
                    this.showInfo = false;
                }
            }
        }
    },
    computed: {},
    methods: {

        handleClick(tab, event) {
            // console.log(tab, event);
        },
        submit(){
            const that = this;
            let len = this.usedIdArr.length;
            if(len > 0){
                let idsString = that.usedIdArr.toString();
                that.$ajax({
                    type: "post",
                    url: `${that.$store.state.api.tbUrl}/home/commonedit.json`,
                    data: {
                        navigates:idsString
                    },
                    callback: function (data, res) {
                        ShowMsg( '编辑成功', 'success');
                        !!that.afterSubmit && that.afterSubmit();
                    },
                    error: function () {},
                });
            }else{
                this.showInfo = true;
                return
            }
        },
        cancel(){
            this.$emit('update:dialogVisible',false);
            this.usedIdArr = this.guidArr;
        }

    },
    
    mounted() {
    },
    beforeDestroy() {

    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss'; 
    .used-tabs {
        ::v-deep .el-tabs__item {
            color: #343434;
        }
        ::v-deep .el-tabs__item.is-active {
            color: $primaryColor;
            font-weight: 800;
        }

        .text-info {
            margin: 0 auto;
            width: 95%;
            margin-top: 32px;
        }

        .bottom {
            margin: 0 auto;
            width: 95%;
            margin-top: 32px;
            display: flex;
            justify-content: space-between;

            .btn-submit {
                width: 88px;
            }
        }

    }



</style>
 